<template>
    <div class="send_menbers">
      <div class="rightBox">
        <div class="btn_group">
          <button class="active">邀好友送会员</button>
        </div>
        <div class="rightBox-content">
          <div class="send_menbers_main">
            <div class="sm_container" v-if="searchInfo">
              <div class="title">邀请进度</div>
              <p class="tit_tips">已邀请人数（{{searchInfo.invitationCount}}人）<span @click="showMask=true;getSearchInfo()">查看详情</span></p>
              <div class="sm_progress_box">
                <div class="progress_bar">
                  <div class="bar_item" :class="{'active': searchInfo.invitationCount>=1}"><div class="preson">0人</div></div>
                  <div class="bar_item" :class="{'active': searchInfo.invitationCount>=2}"><div class="preson">1人</div></div>
                  <div class="bar_item" :class="{'active': searchInfo.invitationCount>=3}"><div class="preson">2人</div></div>
                  <div class="bar_item" :class="{'active': searchInfo.invitationCount>=4}"><div class="preson">3人</div><div class="preson_r">4人</div></div> 
                </div>
                <div class="sm_time_box">
                  <span>{{ timeData.h >=10 ? timeData.h : '0'+timeData.h }}</span>:<span>{{ timeData.m>=10 ? timeData.m : '0'+timeData.m }}</span>:<span>{{ timeData.s>=10 ? timeData.s : '0'+ timeData.s }}</span>
                </div>
              </div>
              
            </div>
            <div class="sm_container" v-if="searchInfo">
              <div class="title">邀请方式</div>
              <div class="sm_text" id="copyText">
                掌上精选-点击链接注册成功可免费领取会员<br/>
                专业的电商直播数据分析平台，涵盖直播、达人、商品、品牌四大分析模块，实现对数据精准监控分析，助力商家轻松玩转直播，快速涨粉。<br/>
                {{ sharchLink }}
              </div>
              <div class="sm_btn" v-if="searchInfo.status==-1" @click="startSearch">邀请好友</div>
              <div class="sm_btn" v-if="searchInfo.status==0" @click="copySearch">点击复制 转发好友</div>
              <div class="sm_btn btn_01" v-if="searchInfo.status==1">您已领取成功</div>
              <div class="sm_btn btn_02" v-if="searchInfo.status==2" @click="restart">任务已超时，重新开始</div>
            </div>
            <div class="sm_container">
              <div class="title">活动规则</div>
              <div class="sm_text_two">
                1. 邀请好友助力，在3小时内成功邀请到4人助力，即可获得当前会员级别延期30天（SVIP-个人版及以下的会员获得30天SVIP-个人版）；<br/>
                2. 助力人点击好友发来的链接助力，注册成功并登录即算作助力完成；<br/>
                3. 助力人完成助力后，点击激活可免费获得当前会员级别延期30天（SVIP-个人版及以下的会员获得30天SVIP-个人版），（激活会员：发起自己的<br/>
                  助力活动，待所有助力人完成助力后，即可激活会员）。<br/>
                4. 获得的会员卡生效规则：<br/>
                ① 如果您当前会员级别低于SVIP-个人版会员，会员卡立即生效，有效期30天；<br/>
                ② 如果您当前会员级别高于/等于SVIP-个人版会员，会员卡在您当前会员权限期限的基础上增加30天；<br/>
                5. 每位好友只能助力一次，同一个账户，同一个手机号及同一设备号在本次活动中均视为同一助力用户。<br/>
                6. 如发现用户存在作弊行为，则取消用户奖励。<br/>
                7. 本次活动最终解释权归掌上精选平台所有。<br/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sm_mask">
        <el-dialog
          :visible.sync="showMask"
          width="440px"
          top="35vh"
          class="sm_dialog"
          @open="opendialog()"
        >
          <div class="sm_mask_box">
            <div class="mask_title">邀请列表</div>
            <div class="mask_centent" v-if="invitationMobileList!=null">
              <p class="text" v-for="(item,index) in invitationMobileList" :key="item+'_'+index">用户{{ item }}注册成功</p>
              <!-- <p class="text">用户180****4539注册成功</p>
              <p class="text">用户180****4539注册成功</p>
              <p class="text">用户180****4539注册成功</p> -->
            </div>
            <div class="no_data" v-else>
              <img src="@/assets/shi/zanwushuju.png" alt />
              <div>暂无邀请哦~</div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
</template>

<script>
export default {
  props: {} ,
  data() {
    return {
      showMask: false,
      msg : null,
      sharchLink: '',
      searchInfo: null,
      invitationMobileList: [],
      time: 0,
      timeData:{
        d: "0",
        h: "0",
        m: "0",
        s: "0", 
      },
      timeOut: null
    };
  },
  components: {},
  computed: {},
  created() {
    this.$nextTick(() => {
      document.title = '邀好友送会员';
    });
    this.getSearchLink();
    this.getSearchInfo();
  },
  mounted() {},
  watch: {},
  methods: {
    opendialog(){

    },
    // 倒计时方法
    getTime(){
      if(this.time >= 0){
        this.timeData.h = Math.floor(this.time / 60 / 60 % 24); //获取小时数
        this.timeData.m = Math.floor(this.time / 60 % 60);      //获取分钟数
        this.timeData.s = Math.floor(this.time % 60);           //获取秒数
      }
      if(this.searchInfo.status!=1&&this.searchInfo.status!=-1){
        this.timeOut = setTimeout(this.getTime,1000)
      }
      this.time--
    },
    // 复制邀请链接
    copySearch(){
      if(this.msg) this.msg.close(); //再次点击按钮,清除之前的消息成功提示
      let copyText = document.getElementById("copyText").innerText;
      this.$copyText(copyText).then(e=>{
        // if (document.getElementsByClassName("el-message").length === 0) {
          this.msg = this.$message({
            message: '复制成功',
            type: 'success',
            offset: 100
          });
        // }
      })
    },
    //  获取邀请链接
    getSearchLink(){
      this.$axios.get('/api/customer/GetInviterCode').then(res => {
        if (res.data.code == 0) {
          this.sharchLink = location.origin + '/talent_main/sendMembers?invitecode=' + res.data.data.invitecode;
        }
      });
    },
    // 获取邀请进度
    getSearchInfo(){
      // 清除定时器
      clearInterval(this.timeOut)
      this.$axios.get('/api/customer/GetInvitationTask').then(res => {
        if (res.data.code == 0) {
          let data = res.data.data;
          this.searchInfo = data;
          this.invitationMobileList = data.invitationMobileList;
          this.time = data.remainingSecond;
          this.getTime()
          // 如果邀请成功
          if(this.searchInfo.status==1){
            this.$bus.$emit('invitationCount',true)
          }
        }
      });
    },
    // 开始任务
    startSearch(){
      this.$axios.get('/api/customer/RestartInvitationTask').then(res => {
        if(!res.data.code){
          this.getSearchInfo();
          this.copySearch();
        }else{
          this.$message({
            message: res.data.msg,
            type: 'error',
            offset: 100
          });
        }
      })
    },
    // 任务已超时,重新开始
    restart(){
      this.$axios.get('/api/customer/RestartInvitationTask').then(res => {
        if(!res.data.code){
          this.$message({
            message: this.searchInfo.status==-1?'任务已开始':'任务已重新开始',
            type: 'success',
            offset: 100
          });
          this.getSearchInfo()
        }
      })
    }
  },
};
</script>

<style scoped lang="less">
.send_menbers {
  margin-top: @margin-num;
  margin-left: @margin-num;
  margin-right: @margin-num;
  height: fit-content;
  border-radius: 4px;
  position: relative;
  .rightBox {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    height: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 6px;
    .btn_group {
      .active {
        background-color: #fd7f2c;
        color: #ffffff !important;
      }
      button {
        font-size: 14px;
        color: #555;
        padding-left: 23px;
        padding-right: 23px;
        height: 40px;
        background-color: #fff;
        border-radius: 4px;
        margin-right: 7px;
        font-weight: 600;
      }
    }
  }
  .rightBox-content {
    min-height: 100vh;
    background-color: #ffffff;
    border-radius: 6px;
    margin-top: 10px;
  }
}
.send_menbers_main{
  width: 1000px;
  margin: 0 auto;
  padding-top: 46px;
  box-sizing: border-box;
}
.sm_container{
  width: 100%;
  // height: 160px;
  border: 2px #efefef dashed;
  border-radius: 10px;
  padding-left: 48px;
  margin-bottom: 35px;
  position: relative;
  box-sizing: border-box;
  .title{
    position: absolute;
    top: 0;
    left: -2px;
    transform: translateY(-50%);
    width: 80px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fd7f2c;
    background-color: #fff5ee;
	  border-radius: 10px 0px 10px 0px;
  }
  .tit_tips{
    margin-top: 51px;
    font-size: 14px;
    color: #888888;
    span{
     color: #fd7f2c;
     cursor: pointer;
    }
  }
  .sm_text{
    font-size: 14px;
    line-height: 26px;
    color: #555555;
    margin-top: 35px  ;
  }
  .sm_text_two{
    font-size: 14px;
    line-height: 26px;
    color: #888;
    margin-top: 35px;
    margin-bottom: 27px;
  }
  .sm_btn{
    width: 140px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    background-color: #fd7f2c;
	  border-radius: 4px;
    margin-top: 20px;
    margin-bottom: 30px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .btn_01{
    background-color: #b5b5b5;
    color: #fff;
  }
  .btn_02{
    width: 164px;
    color: #fd7f2c;
    background-color: #fff;
    border: solid 1px #fd7f2c;
  }
}
.sm_progress_box{
  display: flex;
  align-items: center;
  margin-top: 19px;
  margin-bottom: 66px;
  .progress_bar{
    width: 679px;
    display: flex;
    .bar_item{
      position: relative;
      width: 25%;
      height: 10px;
      border-radius: 10px;
      background-color: #f5f5f5;
      &::after{
        content: "";
        position: absolute;
        right: -10px;
        top: -50%;
        width: 14px;
        height: 14px;
        border: solid 2px #ffffff;
        background-color: #e5e5e5;
        border-radius: 50%;
        z-index: 9;
      }
      &.active{
        background-color: #fd7f2c;
        &::after{
          background-color: #fd7f2c;
        }
      }
      .preson{
        position: absolute;
        left: -8px;
        bottom: -32px;
        font-size: 14px;
        color: #555555;
      }
      .preson_r{
        position: absolute;
        right: -16px;
        bottom: -32px;
        font-size: 14px;
        color: #555555;
      }
    }
    
  }
  .sm_time_box{
    margin-left: 50px;
    font-size: 16px;
    font-family: DINAlternate-Bold;
    color: #fd7f2c;
    span{
      display: inline-block;
      width: 32px;
      line-height: 28px;
      text-align: center;
      background-color: #fff5ee;
	    border-radius: 4px;
      margin: 0 7px;
    }
  }
}
.sm_dialog{
  /deep/.el-dialog{
    border-radius: 10px;
  }
}
.sm_mask_box{
  width: 100%;
  min-height: 280px;
  background-color: #ffffff;
	border-radius: 4px;
  padding: 23px 20px;
  box-sizing: border-box;
  .mask_title{
    display: flex;
    align-items: center; 
    font-size: 16px;
    font-weight: 600;
    color: #222222;
  }
  .mask_title::before{
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    border-radius: 10px;
    background-color: #ee7d2f;
    margin-right: 6px;
  }
  .mask_centent{
    margin-top: 24px;
    .text{
      font-size: 14px;
      color: #555555;
      text-align: center;
      margin-bottom: 10px;
    }
  }
  .no_data{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #b5b5b5;
    margin-top: 24px;
    img{
      width: 197px;
      height: 155px;
    }
  }
}
</style>
